<template>
    <div id="headerbar">
      <div class="header" v-if="show">
            <!-- logo -->
        <div class="logo">
            <img src="" alt=" logo ">
        </div>
        <!-- btn -->
        <div class="btn_group">
            <!-- <div class="btn">
                <div class="icon">
                    <i class="el-icon-zoom-in"></i>
                </div>
                <div class="txt">
                    查看网店
                </div>
            </div>

            <div class="btn">
                <div class="icon">
                    <i class="el-icon-refresh"></i>
                </div>
                <div class="txt">
                    更新首页静态
                </div>
            </div>

            <div class="btn">
                <div class="icon">
                    <i class="el-icon-refresh"></i>
                </div>
                <div class="txt">
                    更新全部静态
                </div>
            </div>

            <div class="btn">
                <div class="icon">
                    <i class="el-icon-loading"></i>
                </div>
                <div class="txt">
                    清除缓存
                </div>
            </div>

            <div class="btn">
                <div class="icon">
                    <i class="el-icon-mobile-phone"></i>
                </div>
                <div class="txt">
                    手机缓存
                </div>
            </div>

            <div class="btn">
                <div class="icon">
                    <i class="el-icon-notebook-2"></i>
                </div>
                <div class="txt">
                    记事本
                </div>
            </div> -->

            <div class="btn" @click="logout">
                <div class="icon">
                    <i class="el-icon-switch-button"></i>
                </div>
                <div class="txt">
                    退出    
                </div>
            </div>
            
        </div>
      </div>

      <div class="bar">
          <div class="left">
              导航菜单
          </div>
          <div class="right">
              <div class="btn_item">
                  <div class="">
                      <i class="el-icon-menu"></i>
                  </div>
                  <div class="txt" @click="show = !show">
                      {{ show  ? "隐藏" : "显示" }}
                  </div>
              </div>
              <div class="btn_item">
                  <div class="">
                      <i class="el-icon-caret-right"></i>
                  </div>
                  <div class="txt" @click="$router.push('/')">
                      起始页
                  </div>
              </div>
              <div class="btn_item">
                  <div class="">
                      <i class="el-icon-postcard"></i>
                  </div>
                  <div class="txt" @click="menuSet">
                      菜单设置
                  </div>
              </div>
          </div>
      </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                show: true,
            }
        },
        methods: {
            // 菜单设置
            menuSet() {
                this.$router.push("/menulist")
            },
            // 退出
            logout() {
                localStorage.removeItem("token")
                this.$router.push("/login")
                this.$message.success("退出成功")
            }
        },
    }
</script>

<style lang="scss" scoped>
#headerbar {
    width: 100%;

    .header {
        width: 100%;
        display: flex;
        justify-content: space-between;
         background-color: rgb(39,160,215);
        .btn_group {
        display: flex;
        align-items: center;

        .btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 60px;
            justify-content: center;
            padding: 0 10px;
            color: #fff;
            width: 80px;
            cursor: pointer;
            &:hover {
                background-color: orange;
            }
            .icon {
                font-size: 20px;
            }
            .txt {
                font-size: 12px;
                height: 30px;
                line-height: 30px;
            }
        }
    }
    
    }
    .bar {
        width: 100%;
        display: flex;
        align-items: center;
        .left {
            width: 200px;
            height: 45px;
            line-height: 45px;
            background-color: rgb(14,148,209);
            color: #fff;
            padding-left: 20px;
            box-sizing: border-box;
        }
        .right {
            flex: 1;
            padding-left: 20px;
            background-color: rgb(211, 206, 206);
            height: 45px;
            line-height: 45px;
            display: flex;
            .btn_item {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100px;
                text-align: center;
                cursor: pointer;
                box-sizing: border-box;
                &:hover {
                    background-color: orange;
                }
                .txt {
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>